<!DOCTYPE html>
<html>
    <!-- Derived from gecko-dev/gfx/webrender/tests/mix-blend-mode-2.html -->
    <!-- hand.svg animation from auroraos.ru -->
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <style>
            html, body {
                margin: 0;
            }
            img {
                display: block;
            }
            #container {
                margin: 0;
                position: absolute;
                width: 100%;
                height: 100%;
            }
            .rect {
                position: absolute;
                display: block;
                padding: 0 40px 20px 0;
                color: #a1a1a1;
                text-align: right;
                font-size: 0;
                width: 25%;
                height: 25%;
                z-index: auto;
            }
        </style>
    </head>
    <body>
    <div style="background: #3c2368; width: 100vw; height: 100vh;">
        <div id="container">
            <div class="rect" style="left:   0%; top:  0%; mix-blend-mode: normal;">
                <img src="mix-blend-mode/hand.svg" style="width: 100%; height: 100%;"/>
            </div>

            <div class="rect" style="left:  25%; top:  0%; mix-blend-mode: multiply;">
                <img src="mix-blend-mode/hand.svg" style="width: 100%; height: 100%;"/>
            </div>

            <div class="rect" style="left:  50%; top:  0%; mix-blend-mode: screen;">
                <img src="mix-blend-mode/hand.svg" style="width: 100%; height: 100%;"/>
            </div>

            <div class="rect" style="left:  75%; top:  0%; mix-blend-mode: overlay;">
                <img src="mix-blend-mode/hand.svg" style="width: 100%; height: 100%;"/>
            </div>

            <div class="rect" style="left:   0%; top: 25%; mix-blend-mode: darken;">
                <img src="mix-blend-mode/hand.svg" style="width: 100%; height: 100%;"/>
            </div>

            <div class="rect" style="left:  25%; top: 25%; mix-blend-mode: lighten;">
                <img src="mix-blend-mode/hand.svg" style="width: 100%; height: 100%;"/>
            </div>

            <div class="rect" style="left:  50%; top: 25%; mix-blend-mode: color-dodge;">
                <img src="mix-blend-mode/hand.svg" style="width: 100%; height: 100%;"/>
            </div>

            <div class="rect" style="left:  75%; top: 25%; mix-blend-mode: color-burn;">
                <img src="mix-blend-mode/hand.svg" style="width: 100%; height: 100%;"/>
            </div>

            <div class="rect" style="left:   0%; top: 50%; mix-blend-mode: hard-light;">
                <img src="mix-blend-mode/hand.svg" style="width: 100%; height: 100%;"/>
            </div>

            <div class="rect" style="left:  25%; top: 50%; mix-blend-mode: soft-light;">
                <img src="mix-blend-mode/hand.svg" style="width: 100%; height: 100%;"/>
            </div>

            <div class="rect" style="left:  50%; top: 50%; mix-blend-mode: difference;">
                <img src="mix-blend-mode/hand.svg" style="width: 100%; height: 100%;"/>
            </div>

            <div class="rect" style="left:  75%; top: 50%; mix-blend-mode: exclusion;">
                <img src="mix-blend-mode/hand.svg" style="width: 100%; height: 100%;"/>
            </div>

            <div class="rect" style="left:   0%; top: 75%; mix-blend-mode: hue;">
                <img src="mix-blend-mode/hand.svg" style="width: 100%; height: 100%;"/>
            </div>

            <div class="rect" style="left:  25%; top: 75%; mix-blend-mode: saturation;">
                <img src="mix-blend-mode/hand.svg" style="width: 100%; height: 100%;"/>
            </div>

            <div class="rect" style="left:  50%; top: 75%; mix-blend-mode: color;">
                <img src="mix-blend-mode/hand.svg" style="width: 100%; height: 100%;"/>
            </div>

            <div class="rect" style="left:  75%; top: 75%; mix-blend-mode: luminosity;">
                <img src="mix-blend-mode/hand.svg" style="width: 100%; height: 100%;"/>
            </div>
        </div>
        </div>
    </body>
</html>
